<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dojo MVC Node Widget Test</title>

	<style type="text/css">
		@import "../../../dijit/themes/claro/document.css";
		@import "../../../dijit/tests/css/dijitTests.css";

		.bgRed {
			background-color: red;
		}

		.bgGreen {
			background-color: green;
		}

		.bgBlue {
			background-color: blue;
		}

		.boldText {
			font-weight: Bold;
		}
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<script type="text/javascript">
		require = {
			isDebug: 1,
			async: 1,
			mvc: {debugBindings: 1}
		};
	</script>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>

	<script type="text/javascript">
		require([
			"dojox",
			"dojo/Stateful",
			"dojo/parser",
			"dojo/date/stamp",
			"dojo/date/locale",
			"dojox/mvc/parserExtension",
			"dojo/domReady!"
		], function(dojox, Stateful, parser, stamp){

			progressModel = new Stateful({value: 0});
			datetimeModel = new Stateful({value: new Date});
			colorModel = new Stateful({value: "#000000"});

			utcISODateTimeConverter = {
				format: function(value){
					return stamp.toISOString(value, {zulu: 1});
				},
				parse: function(value){
					return stamp.fromISOString(value);
				}
			};

			localISODateTimeConverter = {
				format: function(value){
					return stamp.toISOString(value).replace(/[\+\-]\d{2}:\d{2}$/, "");
				},
				parse: function(value){
					return stamp.fromISOString(value);
				}
			};

			isoDateConverter = {
				format: function(value){
					return stamp.toISOString(value, {selector: "date"});
				},
				parse: function(value){
					var utcDate = stamp.fromISOString(value + "T00:00:00Z"),
					 current = this.source.value;
					return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate(), current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds());
				}
			};

			isoTimeConverter = {
				format: function(value){
					return stamp.toISOString(value, {selector: "time"}).substr(1);
				},
				parse: function(value){
					var utcTime = stamp.fromISOString("1970-01-01T" + value + "Z"),
					 current = this.source.value;
					return new Date(current.getFullYear(), current.getMonth(), current.getDate(), utcTime.getUTCHours(), utcTime.getUTCMinutes(), utcTime.getUTCSeconds(), utcTime.getUTCMilliseconds());
				}
			};

			parser.parse();
		});
	</script>
</head>
<body class="claro">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<h1>Progress elements</h1>
	<div>
		Progress:
		<progress max="100" data-mvc-bindings="value: at(progressModel, 'value')">Hoge</progress>
	</div>
	<div>
		Meter:
		<meter min="0" max="100" low="20" high="80" optimum="50" data-mvc-bindings="value: at(progressModel, 'value')"></meter>
	</div>
	<div>
		Range:
		<input type="range" data-mvc-bindings="value: at(progressModel, 'value')">
	</div>
	<h1>Date/time elements</h1>
	<div>
		Date/time (UTC):
		<input type="datetime" data-mvc-bindings="value: at(datetimeModel, 'value').transform(utcISODateTimeConverter)">
	</div>
	<div>
		Date:
		<input type="date" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoDateConverter)">
	</div>
	<div>
		Time:
		<input type="time" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoTimeConverter)">
	</div>
	<div>
		Date/time (Local):
		<input type="datetime-local" data-mvc-bindings="value: at(datetimeModel, 'value').transform(localISODateTimeConverter)">
	</div>
	<h1>Others</h1>
	<div>
		Color:
		<input type="color" data-mvc-bindings="value: at(colorModel, 'value')">
		<output data-mvc-bindings="value: at(colorModel, 'value')"></output>
	</div>
	<div>
		Output (for above progress):
		<output data-mvc-bindings="value: at(progressModel, 'value')"></output>
	</div>
	<div>
		Output (for above date):
		<output data-mvc-bindings="value: at(datetimeModel, 'value').direction(at.from).transform(dojo.date.locale)"></output>
	</div>
  </body>
</html>
